<template>
    <!-- component/tabbar/index.wxml -->
    <view class="tabbar" :style="'padding-bottom:' + tabBarHeight + 'rpx;'">
        <view
            :class="'tabbar-item ' + (activeIdx === index ? 'active' : '')"
            @tap="handleItemTap"
            :data-path="item.pagePath"
            :data-idx="index"
            v-for="(item, index) in tabbarList"
            :key="item.pagePath"
        >
            <view class="tabbar-item-icon posrelative">
                <view v-if="cartNum" class="noStyle"></view>
                <image class="tabbar-item-icon-img" :src="activeIdx === index ? item.selectedIconPath : item.iconPath"></image>
            </view>

            <view class="tabbar-item-text">{{ item.text }}</view>
        </view>
    </view>
</template>

<script>
// component/tabbar/index.js
export default {
    data() {
        return {
            tabbarList: [
                {
                    pagePath: 'firstpages/home/index',
                    text: '首页',
                    iconPath: '/static/images/homeicon.png',
                    selectedIconPath: '/static/images/homeicon1.png'
                },
                {
                    pagePath: 'pages/shopingmall/index',
                    text: '商城',
                    iconPath: '/static/images/shopping.png',
                    selectedIconPath: '/static/images/shopping1.png'
                },
                {
                    pagePath: 'firstpages/exchange/index',
                    text: '消息',
                    iconPath: '/static/images/exchange.png',
                    selectedIconPath: '/static/images/exchange1.png'
                },
                {
                    pagePath: 'firstpages/my/index',
                    text: '我的',
                    iconPath: '/static/images/myicon.png',
                    selectedIconPath: '/static/images/myicon1.png'
                }
            ],
            tabBarHeight: getApp().globalData.tabBarHeight,
            cartNum: false
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        activeIdx: {
            type: Number,
            default: 0
        }
    },
    beforeMount: function () {
        // getApp().getconfig(this);
    },
    mounted: function () {},
    /**
     * 组件的方法列表
     */
    //显示购物袋中的showIcon
    methods: {
        handleItemTap(e) {
            const { idx, path } = e.currentTarget.dataset;

            if (idx === this.activeIdx) {
                return;
            }

            uni.switchTab({
                url: `/${path}`
            });
        }
    }
};
</script>
<style>
/* component/tabbar/index.wxss */
.tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    border-top: 0.5px solid #d5d5d5;
    display: flex;
    font-size: 0;
    background-color: #fff;
}

.tabbar-item {
    flex: 1;
    text-align: center;
    overflow: hidden;
    box-sizing: border-box;
    padding: 6rpx 10rpx 17rpx;
    color: #616365;
}

.tabbar-item-icon {
    margin-bottom: 6rpx;
}

.tabbar-item-icon .tabbar-item-icon-img {
    width: 50rpx;
    height: 50rpx;
    position: relative;
}
.cover-view-tabbar-item-icon-img {
    left: 50%;
    transform: translateX(-50%);
}
.tabbar-item-text {
    font-size: 19rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #999999;
    letter-spacing: 2rpx;
}

.active .tabbar-item-text {
    color: #333333;
}

.carNum {
    position: absolute;
    width: 44rpx;
    height: 44rpx;
    border-radius: 50%;
    font-size: 16rpx;
    text-indent: -4rpx; /*让字体看起来居中*/
    top: 0;
    left: 0;
    line-height: 60rpx;
    text-align: center;
}
.noStyle {
    position: absolute;
    z-index: 10000;
    display: inline-block;
    width: 17rpx;
    background-color: #762322;
    color: #fff;
    border-radius: 50%;
    height: 17rpx;
    line-height: 17rpx;
    margin-left: 32rpx;
    font-size: 17rpx;
    text-align: center;
}
</style>
